import React, { Component } from 'react'
import ChartBox from 'components/chart'
import { Grid } from 'semantic-ui-react'
import moment from 'moment'
import { OneDay } from 'components/date'
import MonthChart from '../chart'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      typeValue: 'time',
      time: moment(0, 'HH'),
    }
  }

  handleChange = (e, { value }) => this.setState({ value })

  handleDayChange = (day) => {
    this.setState({
      time: moment(day),
    })
  }

  handleTypeChange = (e, { value }) => this.setState({ typeValue: value })

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const { name } = match.params
    const { typeValue, time } = this.state
    const d = time.day()
    const m= time.month() + 1
    const y = time.year()
    
    return (
      <React.Fragment>
        <Grid.Row>
          <Grid.Column width={8}>
            <OneDay onChange={this.handleDayChange} />
          </Grid.Column>
        </Grid.Row>
        {typeValue === 'time' && (
          <Grid.Column width={16}>
            <MonthChart pid={projectId} day={d} month={m} year={y} />
          </Grid.Column>
        )}
      </React.Fragment>
    )
  }
}
